/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="page">
		<view class="mainBody">
			<view class="header">
				<u-image class="logoSrc" :src="logoSrc" width="100" height="100" border-radius="300"></u-image>
				<h2 class="mainTit">{{$t('欢迎登录')}} {{AppName}}</h2>
			</view>
			<u-form :model="uForm" ref="uForm" class="u-m-t-30" :error-type="errorType">
				<u-form-item prop="phone" label-position="top">
					<u-input v-model="uForm.phone" :placeholder="$t('请输入手机号')" />
				</u-form-item>
				<u-form-item prop="password">
					<u-input v-model="uForm.password" :placeholder="$t('请输入密码')" type="password" />
				</u-form-item>

				<agreement @changeAgree="changeAgree"></agreement>
			</u-form>

			<u-button type="error" :ripple="true" ripple-bg-color="rgba(0, 0, 0, 0.15)" :hair-line="false"
				shape="circle" class="u-m-t-50" mode="dark" @click="login" :disabled="!isFinishInput">{{$t('登录')}}</u-button>
			<view class="u-flex u-row-between u-m-t-30">
				<view @click="$u.route('/pagesB/register/register')" hover-class="text-hover"
					:style="{color:$u.color['tipsColor']}">{{$t('新用户注册')}}</view>
				<view @click="$u.route('/pagesB/login/smsLogin')" hover-class="text-hover"
					:style="{color:$u.color['tipsColor']}">{{$t('短信验证码登录')}}</view>
				<view @click="$u.route('/pagesC/forget/forget')" hover-class="text-hover"
					:style="{color:$u.color['tipsColor']}">{{$t('忘记密码')}}</view>
			</view>
		</view>


		<thirdLogin></thirdLogin>

	</view>
</template>
<script>
	import agreement from '@/pagesB/components/agreement';
	import thirdLogin from '@/pagesB/components/thirdLogin';

	export default {
		components: {
			agreement,
			thirdLogin
		},
		data() {
			return {
				uForm: {
					phone: '',
					password: ''
				},
				isFinishInput: true,
				AppName: '',
				errorType: ['none'],
				rules: {
					phone: [{
							required: true,
							message: this.$t('请输入手机号'),
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: this.$t('手机号码不正确'),
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						}
					],
					password: [{
						min: 6,
						message: this.$t('请输入不小于6位数的密码'),
					}, ]
				},

				phone: '',
				password: '',
				code: '', //验证码		            providerList: [],
				isWechatShow: false,
				devicetoken: '',
				appInfo: {},
				logoSrc: '',
				agreement: false, //是否同意协议
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		watch: {
			uForm: {
				handler(val) {
					if (val.phone && val.password) {
						this.isFinishInput = true
					} else {
						this.isFinishInput = false
					}
				},
				deep: true
			}

		},
		onLoad(option) {
			this.AppName = this.$AppName
			this.logoSrc = this.STATICURL + 'images/logo/logoWoshop300.png'
			const getPhone = uni.getStorageSync('phone');
			if (getPhone) {
				this.$set(this.uForm, 'phone', getPhone)
			}
			// #ifdef APP-PLUS
			this.getCid();
			// #endif
			this.appInfo = uni.getSystemInfoSync();

		},

		methods: {
			changeAgree(e) {
				this.agreement = e;
			},
			getCid() {
				//从缓存中取cid值，如果取到就不调取接口获取

				var info = plus.push.getClientInfo();

				var cid = info.clientid;

				var token = info.token;

				if (cid && token) {
					uni.setStorageSync("devicetoken", cid);
					this.devicetoken = uni.getStorageSync("devicetoken");
				}


			},
			// 登录
			login(e) {
				uni.removeStorageSync('token');
				this.$refs.uForm.validate(valid => {
					if (!this.agreement) {
						this.$toast(this.$t('请勾选用户协议'));
						return false;
					}
					if (valid) {
						this.$http.getPwdLogin({
							phone: this.uForm.phone,
							password: this.uForm.password,
							devicetoken: this.devicetoken,
						}).then((res) => {
							if (res.status == 200) {
								this.$toast(res.mess)
								uni.setStorageSync('phone', this.uForm.phone);
								this.$store.commit('loginStatus', true)
								uni.setStorageSync('token', res.data.token);
								uni.setStorageSync('identity', res.data.identity);
								uni.setStorageSync('role', res.data.role);
								uni.setStorageSync('role_id', res.data.shop_id);
								uni.setStorageSync('pid', res.data.shop_id);
								uni.setStorageSync('serviceShopId', res.data.serviceShopId);

								uni.$emit('accountLogin', {
									isLogin: true
								})
								this.getaddMemberMobile();
								uni.closeSocket({
									success() {
										console.log('socket关闭成功');
									},
									fail(res) {
										console.log(res);
									}
								})
								setTimeout(() => {
									this.im();
									this.$u.route({
										url: "/pages/tabBar/home",
										type: "reLaunch"
									})
								}, 1500);

							}

						})
					} else {
						this.$toast(this.$t('请正确输入手机号和密码'))
					}
				});


			},
			
			getaddMemberMobile() {
				this.$http.getaddMemberMobile({
					brand: this.appInfo.brand,
					model: this.appInfo.model,
					version: this.appInfo.version,
					system: this.appInfo.system,
					platform: this.appInfo.platform,
				}).then((res) => {
					console.log(res);
				})
			},

			// 获取手机信息

			navigateTo(url, data) {
				this.$navigateTo(url)
			},
			goHome() {
				uni.switchTab({
					url: '/pages/tabBar/home',
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import "~uview-ui/index.scss";

	.page {
		background: #ffffff;
		height: 100%;
	}

	.mainBody {
		padding: 200rpx 80rpx;

		.mainTit {
			margin: 30rpx 0 10rpx;
			font-size: 48rpx;
		}

		.subTit {
			font-weight: lighter;
		}
	}

	.logoSrc {
		width: 110rpx;
		height: 110rpx;
		border-radius: 200px;
		position: relative;
		box-shadow: 0 0 0 6rpx #ffd0d0, 0 0 0 14rpx #ffefef;
	}

	/deep/ uni-view {
		line-height: 2.4;
	}
</style>
